<template>
    <div class="tip">
        <!--头部导航-->
        <mt-header fixed title="商品详情">
            <router-link v-bind="{to:this.routs}" slot="left">
                <mt-button icon="back">返回</mt-button>
            </router-link>
            <mt-button icon="more" slot="right"></mt-button>
        </mt-header>
        <div v-for="(x,index) in list" :key="index">
            <div class="box">
            <!--这里是为了避免switch直接的相互影响，所以这里value用数组表示-->
                <mt-switch v-model="value[index]" class="switch"></mt-switch>
                <img v-bind:src="x.thumb_path" class="pic">
                <ul>
                    <li v-html="x.title"></li>
                    <li>
                        <span>￥{{x.sell_price}}</span>
                        <carInput :Counts="x.cou" :shopId="x.id" v-on:sendCount="getCount"></carInput>
                        <!--注意：这里的cou已经在下边的getLoca()方法中赋予了准确的值(即从本地获取到的数量)，默认是假的1-->
                        <a href="javascript:;" @click="removeShop(x.id,index)">删除</a>
                    </li>
                </ul>
            </div>
            <p class="line"></p>
        </div>
        <div class="price">
            <div>
                <p>总计(不含运费)</p>
                <p>已选商品{{totalCount}}件，总价{{totalPrice}}</p>
            </div>
            <button>去结算</button>
        </div>
    </div>
</template>

<script>
    import apiDoma from "../../kits/common.js";//导入公共域名地址
    import {getLocaData,upData,removeData} from "../../kits/locaMsg.js";//导入获取本地数据的方法和更新数据的方法，这里是按需导入
    import { Toast } from 'mint-ui'; //导入mint-ui提示组件。
    import carInput from "../subcom/carNumber.vue";//导入购物车页面的计算商品数量的input组件。
    export default{
        components:{
            carInput: carInput//进行子组件的注册。
        },
        props:["bys"],
        created(){//通过生命周期函数created方法，中的$route.params拿到路由中传递的id值
            this.id = this.$route.params.bys;
            this.getLoca();//页面初加载时获取购物车页面的数据
        },
        data(){
            return {
                id: "",//用来后退用。
                list:[],//用来存储购物车页面的信息。
                value: [], //用来接收switch开关中的值，这个value中存的是switch开关的状态，即true或false。
                routs: "/shop/shopifo/" + this.id,//用来存储返回按钮的跳转路由
                totalPrice: 0,//用来存放购买商品的总价格。
            }
        },
        methods:{
            getLoca(){//获取到本地存储中的数据将其展示在页面当中
                let locaObj = getLocaData();//这里得到的是一个对象，对象中是{商品id，商品数量}
                let shopIds = "";
                for(var key in locaObj){
                   shopIds += key + ",";
                };
                // shopIds = shopIds.substr(0,shopIds.length-1);//方法一：
                shopIds = shopIds.replace(/\,$/g,""); //方法二：
                //确定url地址
                let url = apiDoma.picdoName + "/api/goods/getshopcarlist/" + shopIds;
                this.$http.get(url).then(function(response){
                    if(response.body.status !== 0){//如果status不等于0，则表明数据获取失败。
                        Toast(response.body.message);
                        return;//同时阻断后边执行
                    };
                    this.list = response.body.message;
                    /*为了解决点击下一个开关可能会影响其它开关的状态的bug，在这里将switch开关中的值全部初始化成false,
                    根据返回的数据中的值决定push几个false进去(即初始化几个按钮)*/
                    response.body.message.forEach((v,i)=>{//这里使用箭头函数的目的是为了让内部的this指向vue对象(因为箭头函数中是没有this的)
                        this.value.push(false);
                    });
                    //将本地localStorage中的count数量赋值给message中的cou。
                    response.body.message.forEach(function(v,i){
                        v.cou = locaObj[v.id];//将本地获取到的值赋值给页面中返回信息的cou，这里的locaObj[v.id]相当于取到localObj[对应id]的数量
                    });
                });
                //用来判断返回按钮跳转的路由页面。
                if(this.id == 1){
                    this.routs = "/Home";
                }else {
                    this.routs = "/shop/shopifo/" + this.id;
                };
            },
            getCount(resObj){ //用来接收子组件(计算购买数量)传过来的值,input中的值就是子组件传来的值
                //1.0进行本地数据的更新。
                upData(resObj);
                //2.0更新购买页面中即list中的数据。
                for(var i = 0 ;i < this.list.length; i++){
                    if(this.list[i].id == resObj.shopId){ //如果返回的数据中id和子组件传来的id相同
                        if(resObj.type == "add"){//证明点击的是加
                            this.list[i].cou = this.list[i].cou + 1; //将数据中的cou加一
                        }else {
                            this.list[i].cou = this.list[i].cou - 1;//将数据中的cou减一
                        };
                        break;
                    };
                };
            },
            removeShop(shopid,index){//用来删除商品
                //1.删除switch开关vlue中的值
                this.value.splice(index,1);//这里的index指上边使用v-for遍历传回来的数据时商品对应的index
                //2.删除list中的值
                this.list.splice(index,1);
                //3.删除本地localStorage中的值
                removeData(shopid);
            }
        },
        computed: {//此方法用来动态计算属性的值
            totalCount(){
                //这里通过对switch开关的选中状态数组进行遍历，返回所有选中的数，filter方法中是写表达式，用来过滤数组用。
                let newArr = this.value.filter(function(item){
                    return item == true;
                });
                //同时对value状态的遍历拿到选中状态对应的商品单价和数量计算总价。
                let pris = 0;//用来接收每次计算完成的总价
                this.value.forEach((item,index)=>{
                    if(item){//如果是选中状态，表明就要拿到改对象对应索引的商品
                        let conts = this.list[index].cou,//商品数量
                            price = this.list[index].sell_price;
                            pris += price * conts;
                    };
                });
                this.totalPrice = pris;//最终将这个价格赋值给totalPrice即可
                return newArr.length;//这里返回的就是选中了几件
            }
        }
    }
</script>

<style scoped>
    .mui-switch mui-pull-left {
        left: 0;
    }
    .box {
        padding: 5px;
        display: flex;
    }
    .box .switch {
        flex: 1;
    }
    .box .pic {
        height: 97px;
        flex: 2;
        padding-left: 10px;
        padding-right: 10px;
    }
    .box ul {
        list-style: none;
        padding-left: 0;
    }
    .box ul li:first-of-type {
        font-size: 14px;
        color: blue;
        font-weight: 700;
    }
    .box ul li:nth-of-type(2) span{
        color: #ec3838;
        font-weight: 700;
    }
    .box ul li:nth-of-type(2) a {
        color:#e92322;
        font-weight: 700;
    }
    .line {
        height: 1px;
        border: 1px solid rgba(0,0,0,0.3);
    }
    .price {
        display: flex;
        background-color: #ddd;
        padding: 5px;
    }
    .price div {
        flex: 1;
        margin-left: 20px;
    }
    .price button {
        flex: 0 0 60px;
        height: 36px;
        margin: 12px 30px 0 0;
        background-color: #e92322;
        color: #fff;
    }
</style>
